<template>
  <div>
    <!-- <div>web</div> -->
    <!-- <div>{{ viewType }} {{ actionId }} {{ resId }}</div> -->
    <template v-if="viewType === 'tree'">
      <TreeView :actionId="actionId" />
      <!-- <component :is="views[viewType]" :actionId="actionId" /> -->
    </template>

    <template v-else-if="viewType === 'form'">
      <FormView :actionId="actionId" :resId="resId" />
      <!-- <component :is="views[viewType]" :actionId="actionId" :resId="resId" /> -->
    </template>
  </div>
</template>

<script setup>
import TreeView from './tree/TreeView.vue'
import FormView from './form/FormView.vue'

import { computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const actionId = computed(() => {
  const rounteVal = router.currentRoute.value
  return rounteVal.query.action
})

const viewType = computed(() => {
  const rounteVal = router.currentRoute.value
  return rounteVal.query.view_type
})

const resId = computed(() => {
  const rounteVal = router.currentRoute.value
  return rounteVal.query.id
})
</script>
<style scoped></style>
